<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="search_type" @change="searchChange" style="width:120px">
            <el-option
              v-for="item in search_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width:200px"
            clearable
            v-model.trim="searchVal"
            :placeholder="searchPla"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜 索</template>
          </dj-button>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span>{{storeName}}</span>
          <span>{{otherInfo}}</span>
        </el-form-item>
      </el-form>
      <el-table
        highlight-current-row
        :data="listData"
        v-loading.body="listLoading"
        border
        size="small"
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" prop="creat_time" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images fit">
              <img
                :src="scope.row.thumb"
                :data-source="scope.row.img"
                class="image"
                :key="scope.row.thumb"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="礼品名称" prop="name"></el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="国标码" prop="gb_code"></el-table-column>
        <el-table-column align="center" label="分类" prop="gift_type"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label="采购价" prop="end_money_sell"></el-table-column>
        <el-table-column align="center" label="本次入库数量" prop="arrive_num"></el-table-column>
        <el-table-column align="center" label="本次入库金额" prop="arrive_money"></el-table-column>
        <el-table-column align="center" label="加入打印">
          <template slot-scope="scope">
            <el-button
              style="font-size:28px"
              v-show="scope.row.in_car==0"
              type="text"
              icon="el-icon-circle-plus"
              @click="addcar(scope.row,1)"
            ></el-button>
            <el-button
              style="font-size:28px;margin-left:0;color:#f56c6c"
              v-show="scope.row.in_car==1"
              type="text"
              icon="el-icon-remove"
              @click="addcar(scope.row,2)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 打印管理弹框 -->
    <dj-printer-new ref="printerNew" :carList="carList" :list="listData"></dj-printer-new>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
      <el-badge :value="carList.length" class="item pull-right">
        <el-button
          :disabled="carList.length==0"
          type="primary"
          size="small"
          @click="showCar(1)"
        >打印条码</el-button>
      </el-badge>
      <span
        v-if="listData.length > 0"
        class="pull-right mt10"
        style="font-size:14px;color:#606266;"
      >
        <span class="pr">入库数量合计: {{arrive_num}}</span>
        <span class="pr">入库金额合计: {{arrive_money|keepTwoNum}}</span>
      </span>
    </div>
  </div>
</template>
<script>
import {
  getReceiveBatchList,
  getReceiveBatchListPage,
  getReceiveBatchSummary,
} from "@/api/report/store_stock_in";
import {
  pickerOptionsF,
  pickerDateDot,
  optionMaxTime,
  getDateString,
} from "@/utils";
import djPrinterNew from "@/components/printer/djPrinterNew";
export default {
  components: {
    "dj-printer-new": djPrinterNew,
  },
  data() {
    return {
      tableColumns: [
        {
          label: "序号",
          dtcol: "index",
        },
        {
          label: "图片",
          dtcol: ["thumb", "img"],
          type: "image",
        },
        {
          label: "礼品名称",
          dtcol: "name",
        },
        {
          label: "礼品编号",
          dtcol: "gift_id",
        },
        {
          label: "神采编号",
          dtcol: "no_obsolete",
        },
        {
          label: "国标码",
          dtcol: "gb_code",
        },
        {
          label: "分类",
          dtcol: "gift_type",
        },
        {
          label: "箱规",
          dtcol: "box_num",
        },
        {
          label: "采购价",
          dtcol: "end_money_sell",
          isnum: true,
        },
        {
          label: "本次入库数量",
          dtcol: "arrive_num",
          // summary: true
        },
        {
          label: "本次入库金额",
          dtcol: "arrive_money",
          isnum: true,
          // summary: true
        },
      ],
      options: {
        //预览图配置
        toolbar: true,
        url: "data-source",
      },
      search_type: 1,
      searchPla: "请输入礼品名称",
      searchVal: "",
      search_list: [
        { id: 1, name: "按名称" },
        { id: 2, name: "按神采编号" },
        { id: 3, name: "按礼品编号" },
      ],
      listData: [], // 对象数组元素中的对象含有store_id属性
      listLoading: false,
      formInline: {
        batch_id: "", // 收货批次id
        type: "", // 1供应商采购入库，2中央仓采购入库，3其他仓调拨入库
        name: "",
        gift_id: "",
        no_obsolete: "",
      },
      carList: [],
      storeName: "",
      otherInfo: "",
      arrive_num: 0,
      arrive_money: 0,
      currentPage: 1,
      totalDataNumber: 0,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.beforeComingIn();
    });
  },
  methods: {
    beforeComingIn() {
      if (this.$route.query.routerflag) {
        let col = this.$route.query.col;

        this.formInline.batch_id = this.$route.query.row.batch_id;
        this.formInline.type = this.$route.query.row.type;
        this.storeName = this.$route.query.global.store_name;
        this.otherInfo = "收货单号：" + this.$route.query.row.send_order_no;
        this.fetchData();
      } else {
        if (!this.listData || this.listData.length == 0) {
          this.fetchData();
        }
      }
    },
    searchChange(val) {
      this.searchPla =
        val == 1
          ? "请输入礼品名称"
          : val == 2
          ? "请输入神采编号"
          : "请输入礼品编号";
    },
    searchClick() {
      this.formInline.name = this.formInline.gift_id = this.formInline.no_obsolete =
        "";
      if (this.search_type == 1) {
        this.formInline.name = this.searchVal;
      } else if (this.search_type == 2) {
        this.formInline.no_obsolete = this.searchVal;
      } else {
        this.formInline.gift_id = this.searchVal;
      }
      this.fetchData();
    },

    //加入打印
    addcar(row, i) {
      if (i == 1) {
        this.carList.push(row);
      } else {
        row.in_car = false;
        let index = this.carList.findIndex((val) => val.gift_id == row.gift_id);
        this.carList.splice(index, 1);
      }
      this.$refs.printerNew.watch_in_car();
    },
    showCar() {
      this.$refs.printerNew.showCar();
    },

    getData(data) {
      data.forEach((val) => {
        val.in_car = this.carList.findIndex((item) => item.gift_id == val.gift_id)>-1?1:0;
        val.end_money_sell = (val.end_money_sell / 1).toFixed(2);
        val.arrive_money = (val.arrive_money / 1).toFixed(2);
      });
      this.listData=data;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.listData = [];
      getReceiveBatchListPage(this.formInline)
        .then((response) => {
          // console.log(11, response);
          this.totalDataNumber = response.message.page * 20;
          if (this.totalDataNumber == 0) {
            this.listLoading = false;
            return;
          }
          getReceiveBatchList(this.formInline, this.currentPage).then(
            (response) => {
              if (response.code == 1 && response.message) {
                response = response.message;
                this.otherInfo =
                  "  采购单号：" +
                  response.purchase_order_id +
                  "  采购渠道：" +
                  response.type_name +
                  "  ";
                if (this.formInline.type == 1) {
                  this.otherInfo += response.supplier_name;
                } else {
                  this.otherInfo += response.house_name;
                }

                this.getData(response.gift_list);
              }
              this.listLoading = false;
            }
          );
        })
        .catch((res) => {
          this.listLoading = false;
        });

      // 合计
      getReceiveBatchSummary(this.formInline).then((response) => {
        this.arrive_money = response.data.arrive_money;
        this.arrive_num = response.data.arrive_num;
      });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentPage = val;
      this.listData = [];
      getReceiveBatchList(this.formInline, val)
        .then((response) => {
          // console.log(response, 'zst1120 getReceiveBatchList');
          if (response.code == 1 && response.message) {
            this.getData(response.message.gift_list);
          }
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
        });
      // 合计
      getReceiveBatchSummary(this.formInline).then((response) => {
        // console.log(33,response)
        this.arrive_money = response.data.arrive_money;
        this.arrive_num = response.data.arrive_num;
      });
    },
  },
};
</script>
<style scoped>
.pr {
  padding-right: 15px;
}
</style>